<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { invoke } from '@tauri-apps/api/core';
import { ElMessage, ElButton, ElInput, ElForm, ElFormItem, ElSelect, ElOption, ElCheckboxGroup, ElCheckbox, ElSwitch } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';

// 设置数据接口
interface AppSettings {
  window_width: number;
  window_height: number;
  show_shortcut_modifiers: string[];
  show_shortcut_key: string;
  hide_shortcut_modifiers: string[];
  hide_shortcut_key: string;
  auto_start: boolean;
}

// 表单数据
const formData = reactive({
  windowWidth: 800,
  windowHeight: 600,
  // 显示窗口快捷键配置
  showShortcutModifiers: ['Alt'] as string[],
  showShortcutKey: 'Space',
  // 隐藏窗口快捷键配置
  hideShortcutModifiers: [] as string[],
  hideShortcutKey: 'Escape',
  // 开机自启动
  autoStart: false
});

// 可用的修饰键选项
const modifierOptions = [
  { label: 'Ctrl', value: 'Ctrl' },
  { label: 'Alt', value: 'Alt' },
  { label: 'Shift', value: 'Shift' },
  { label: 'Cmd/Super', value: 'Super' }
];

// 可用的按键选项
const keyOptions = [
  { label: '空格键 (Space)', value: 'Space' },
  { label: '回车键 (Enter)', value: 'Enter' },
  { label: 'Tab键', value: 'Tab' },
  { label: 'Esc键', value: 'Escape' },
  { label: 'F1', value: 'F1' },
  { label: 'F2', value: 'F2' },
  { label: 'F3', value: 'F3' },
  { label: 'F4', value: 'F4' },
  { label: 'F5', value: 'F5' },
  { label: 'F6', value: 'F6' },
  { label: 'F7', value: 'F7' },
  { label: 'F8', value: 'F8' },
  { label: 'F9', value: 'F9' },
  { label: 'F10', value: 'F10' },
  { label: 'F11', value: 'F11' },
  { label: 'F12', value: 'F12' }
];

// 表单引用和加载状态
const formRef = ref<FormInstance>();
const loading = ref<boolean>(false);

// 表单验证规则
const formRules: FormRules = {
  windowWidth: [
    { required: true, message: '请输入窗口宽度', trigger: 'blur' },
    { type: 'number', min: 400, max: 2000, message: '窗口宽度必须在 400-2000 像素之间', trigger: 'blur' }
  ],
  windowHeight: [
    { required: true, message: '请输入窗口高度', trigger: 'blur' },
    { type: 'number', min: 300, max: 1500, message: '窗口高度必须在 300-1500 像素之间', trigger: 'blur' }
  ],
  showShortcutKey: [
    { required: false, message: '请选择显示窗口的按键', trigger: 'change' }
  ],
  hideShortcutKey: [
    { required: false, message: '请选择隐藏窗口的按键', trigger: 'change' }
  ]
};

/**
 * 显示消息提示
 * @param text 消息内容
 * @param type 消息类型
 */
function showMessage(text: string, type: 'success' | 'error' = 'success') {
  if (type === 'success') {
    ElMessage.success(text);
  } else {
    ElMessage.error(text);
  }
}

/**
 * 加载应用设置
 * 从后端获取当前的应用设置并更新表单数据
 */
async function loadSettings() {
  try {
    console.log('开始加载设置...');
    const settings = await invoke<AppSettings>('load_settings');
    console.log('加载的设置:', settings);

    // 设置窗口尺寸，如果设置中有值则使用，否则保持默认值
    if (settings.window_width) {
      formData.windowWidth = settings.window_width;
    }
    if (settings.window_height) {
      formData.windowHeight = settings.window_height;
    }

    // 设置快捷键配置
    if (settings.show_shortcut_modifiers && settings.show_shortcut_modifiers.length > 0) {
      formData.showShortcutModifiers = [...settings.show_shortcut_modifiers];
    } else {
      formData.showShortcutModifiers = [];
    }
    
    // 处理快捷键，包括空字符串的情况
    formData.showShortcutKey = settings.show_shortcut_key || '';
    
    if (settings.hide_shortcut_modifiers && settings.hide_shortcut_modifiers.length > 0) {
      formData.hideShortcutModifiers = [...settings.hide_shortcut_modifiers];
    } else {
      formData.hideShortcutModifiers = [];
    }
    
    formData.hideShortcutKey = settings.hide_shortcut_key || '';
    
    // 设置自启动状态
    formData.autoStart = settings.auto_start || false;

  } catch (error) {
    console.error('加载设置失败:', error);
    showMessage('加载设置失败: ' + error, 'error');
  }
}

/**
 * 保存应用设置
 * 验证表单数据并保存到后端
 */
async function saveSettings() {
  if (!formRef.value) return;

  try {
    // 表单验证 - 使用try-catch处理验证异常
    let valid = false;
    try {
      valid = await formRef.value.validate();
    } catch (validationError) {
      console.log('表单验证失败:', validationError);
      showMessage('请检查表单输入，确保所有必填项都已正确填写', 'error');
      return;
    }
    
    if (!valid) {
      showMessage('请检查表单输入', 'error');
      return;
    }

    loading.value = true;
    console.log('开始保存设置...');

    const settings: AppSettings = {
      window_width: formData.windowWidth,
      window_height: formData.windowHeight,
      // 使用用户配置的快捷键设置，如果为空则保存为空字符串
      show_shortcut_modifiers: [...formData.showShortcutModifiers],
      show_shortcut_key: formData.showShortcutKey || '',
      hide_shortcut_modifiers: [...formData.hideShortcutModifiers],
      hide_shortcut_key: formData.hideShortcutKey || '',
      auto_start: formData.autoStart
    };

    console.log('保存的设置:', settings);
    await invoke('save_settings', { settings });
    
    // 处理自启动设置
    try {
      await invoke('set_auto_start', { enabled: formData.autoStart });
      console.log('自启动设置已更新:', formData.autoStart);
    } catch (error) {
      console.error('设置自启动失败:', error);
      showMessage('自启动设置失败: ' + error, 'error');
      return;
    }
    
    showMessage('设置保存成功！');

  } catch (error) {
    console.error('保存设置失败:',error);
  } finally {
    loading.value = false;
  }
}



// 组件挂载时加载设置
onMounted(() => {
  loadSettings();
});
</script>

<template>
  <div class="settings-container">
    <div class="settings-content">
      <!-- 标题区域 -->
      <div class="header-section">
        <div class="header-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path
              d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.2579 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.01127 9.77251C4.28054 9.5799 4.48571 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <h1>应用设置</h1>
        <p class="subtitle">配置应用的窗口尺寸和显示选项</p>
      </div>

      <!-- 表单区域 -->
      <el-form ref="formRef" :model="formData" :rules="formRules" class="settings-form" label-width="0"
        label-position="top" status-icon>
        <!-- 窗口尺寸设置 -->
        <div class="form-section">
          <h3 class="section-title">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" />
              <line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" />
              <line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" />
            </svg>
            窗口尺寸
          </h3>

          <div class="form-row">
            <el-form-item prop="windowWidth" class="form-item-enhanced">
              <label class="custom-label">
                <span class="label-text">窗口宽度</span>
                <span class="label-hint">设置应用窗口的宽度</span>
              </label>
              <div class="input-wrapper">
                <el-input v-model.number="formData.windowWidth" type="number" :min="400" :max="2000" :step="10"
                  placeholder="800">
                  <template #suffix>
                    <span class="input-suffix">px</span>
                  </template>
                </el-input>
              </div>
            </el-form-item>

            <el-form-item prop="windowHeight" class="form-item-enhanced">
              <label class="custom-label">
                <span class="label-text">窗口高度</span>
                <span class="label-hint">设置应用窗口的高度</span>
              </label>
              <div class="input-wrapper">
                <el-input v-model.number="formData.windowHeight" type="number" :min="300" :max="1500" :step="10"
                  placeholder="600">
                  <template #suffix>
                    <span class="input-suffix">px</span>
                  </template>
                </el-input>
              </div>
            </el-form-item>
          </div>
        </div>

        <!-- 启动设置 -->
        <div class="form-section" style="margin-top: 20px;">
          <h3 class="section-title">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none">
              <path d="M12 2L2 7l10 5 10-5-10-5z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="m2 17 10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="m2 12 10 5 10-5" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            </svg>
            启动设置
          </h3>

          <div class="form-row">
            <el-form-item class="form-item-enhanced">
              <label class="custom-label">
                <span class="label-text">开机自启动</span>
                <span class="label-hint">开启后应用将在系统启动时自动运行</span>
              </label>
              <div class="input-wrapper">
                <el-switch 
                  v-model="formData.autoStart" 
                  size="large"
                  active-text="开启"
                  inactive-text="关闭"
                  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;"
                />
              </div>
            </el-form-item>
          </div>
        </div>

        <!-- 快捷键设置 -->
        <div class="form-section" style="margin-top: 20px;">
          <h3 class="section-title">
            <svg class="section-icon" viewBox="0 0 24 24" fill="none">
              <rect x="6" y="4" width="4" height="6" rx="1" ry="1" stroke="currentColor" stroke-width="2" />
              <rect x="14" y="4" width="4" height="6" rx="1" ry="1" stroke="currentColor" stroke-width="2" />
              <rect x="4" y="12" width="16" height="6" rx="1" ry="1" stroke="currentColor" stroke-width="2" />
            </svg>
            快捷键配置
          </h3>

          <!-- 显示窗口快捷键 -->
          <div class="shortcut-group">
            <h4 class="shortcut-group-title">
              <svg class="shortcut-icon" viewBox="0 0 24 24" fill="none">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" />
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" />
              </svg>
              显示窗口快捷键
            </h4>
            <p class="shortcut-description">设置用于显示应用窗口的全局快捷键</p>

            <div class="shortcut-config">
              <div class="shortcut-row">
                <el-form-item class="modifier-item">
                  <label class="custom-label">
                    <span class="label-text">修饰键</span>
                    <span class="label-hint">可选择多个修饰键组合</span>
                  </label>
                  <div class="input-wrapper">
                    <el-checkbox-group v-model="formData.showShortcutModifiers" class="modifier-checkboxes">
                      <el-checkbox v-for="option in modifierOptions" :key="option.value" :value="option.value"
                        class="modifier-checkbox">
                        {{ option.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>

                <el-form-item prop="showShortcutKey" class="key-item">
                  <label class="custom-label">
                    <span class="label-text">按键</span>
                    <span class="label-hint">选择触发按键</span>
                  </label>
                  <div class="input-wrapper" style="margin-left: 20px; width: 230px;">
                    <el-select v-model="formData.showShortcutKey" placeholder="选择按键" class="key-select" clearable>
                      <el-option v-for="option in keyOptions" :key="option.value" :label="option.label"
                        :value="option.value" />
                    </el-select>
                  </div>
                </el-form-item>
              </div>

              <div class="shortcut-preview" v-if="formData.showShortcutModifiers.length > 0 || formData.showShortcutKey">
                <span class="preview-label">快捷键预览:</span>
                <div class="preview-keys">
                  <span v-for="modifier in formData.showShortcutModifiers" :key="modifier" class="key-badge">{{ modifier
                    }}</span>
                  <span v-if="formData.showShortcutModifiers.length > 0 && formData.showShortcutKey" class="key-separator">+</span>
                  <span v-if="formData.showShortcutKey" class="key-badge primary">{{ formData.showShortcutKey }}</span>
                </div>
              </div>
              <div class="shortcut-preview" v-else>
                <span class="preview-label">快捷键预览:</span>
                <div class="preview-keys">
                  <span class="key-badge disabled">未配置</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 隐藏窗口快捷键 -->
          <div class="shortcut-group">
            <h4 class="shortcut-group-title">
              <svg class="shortcut-icon" viewBox="0 0 24 24" fill="none">
                <path d="m9.88 9.88a3 3 0 1 0 4.24 4.24" stroke="currentColor" stroke-width="2" />
                <path d="m10.73 5.08a10.43 10.43 0 0 1 1.27-.08c7 0 11 8 11 8a13.16 13.16 0 0 1-1.67 2.68"
                  stroke="currentColor" stroke-width="2" />
                <path d="m6.61 6.61a13.526 13.526 0 0 0-2.49 5.39s4 8 11 8a9.74 9.74 0 0 0 5.39-2.49"
                  stroke="currentColor" stroke-width="2" />
                <line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" stroke-width="2" />
              </svg>
              隐藏窗口快捷键
            </h4>
            <p class="shortcut-description">设置用于隐藏应用窗口的全局快捷键</p>

            <div class="shortcut-config">
              <div class="shortcut-row">
                <el-form-item class="modifier-item">
                  <label class="custom-label">
                    <span class="label-text">修饰键</span>
                    <span class="label-hint">可选择多个修饰键组合</span>
                  </label>
                  <div class="input-wrapper" >
                    <el-checkbox-group v-model="formData.hideShortcutModifiers" class="modifier-checkboxes">
                      <el-checkbox v-for="option in modifierOptions" :key="option.value" :value="option.value"
                        class="modifier-checkbox">
                        {{ option.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>

                <el-form-item prop="hideShortcutKey" class="key-item">
                  <label class="custom-label">
                    <span class="label-text">按键</span>
                    <span class="label-hint">选择触发按键</span>
                  </label>
                  <div class="input-wrapper" style="margin-left: 20px; width: 230px;">
                    <el-select v-model="formData.hideShortcutKey" placeholder="选择按键" class="key-select" clearable>
                      <el-option v-for="option in keyOptions" :key="option.value" :label="option.label"
                        :value="option.value" />
                    </el-select>
                  </div>
                </el-form-item>
              </div>

              <div class="shortcut-preview" v-if="formData.hideShortcutModifiers.length > 0 || formData.hideShortcutKey">
                <span class="preview-label">快捷键预览:</span>
                <div class="preview-keys">
                  <span v-for="modifier in formData.hideShortcutModifiers" :key="modifier" class="key-badge">{{ modifier
                    }}</span>
                  <span v-if="formData.hideShortcutModifiers.length > 0 && formData.hideShortcutKey" class="key-separator">+</span>
                  <span v-if="formData.hideShortcutKey" class="key-badge primary">{{ formData.hideShortcutKey }}</span>
                </div>
              </div>
              <div class="shortcut-preview" v-else>
                <span class="preview-label">快捷键预览:</span>
                <div class="preview-keys">
                  <span class="key-badge disabled">未配置</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-section">
          <el-button type="primary" @click="saveSettings" :loading="loading" size="large" class="save-button">
            <template #icon>
              <svg viewBox="0 0 24 24" fill="none">
                <path
                  d="M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                <polyline points="17,21 17,13 7,13 7,21" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
                <polyline points="7,3 7,8 15,8" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </template>
            保存设置
          </el-button>


        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss">
// 全局滚动条样式
* {
  &::-webkit-scrollbar {
    width: 8px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.4) 0%, rgba(118, 75, 162, 0.4) 100%);
    border-radius: 3px;
    transition: all 0.3s ease;

    &:hover {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%);
    }

    &:active {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
    }
  }

}
</style>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
  }
}

.settings-content {
  max-width: 520px;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  padding: 0;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

// 标题区域样式
.header-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40px 32px;
  text-align: center;
  color: white;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
  }

  .header-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    svg {
      width: 28px;
      height: 28px;
      color: white;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
  }

  h1 {
    margin: 0 0 12px 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .subtitle {
    margin: 0;
    font-size: 16px;
    opacity: 0.85;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
}

// 表单区域样式
.settings-form {
  padding: 32px 40px;

  .form-section {
    margin-bottom: 0;

    .section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 28px 0;
      font-size: 20px;
      font-weight: 700;
      color: #1a202c;
      letter-spacing: -0.3px;

      .section-icon {
        width: 24px;
        height: 24px;
        color: #667eea;
        filter: drop-shadow(0 1px 2px rgba(102, 126, 234, 0.2));
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }
  }

  .form-item-enhanced {
    margin-bottom: 0;

    .custom-label {
      display: block;
      margin-bottom: 12px;

      .label-text {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 4px;
        letter-spacing: -0.1px;
      }

      .label-hint {
        display: block;
        font-size: 13px;
        color: #718096;
        font-weight: 500;
        line-height: 1.4;
      }
    }

    .input-wrapper {
      margin-left: 40px;
      position: relative;
    }
  }

  .el-input {
    :deep(.el-input__wrapper) {
      border-radius: 16px;
      border: 2px solid #e2e8f0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 20px;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      min-height: 56px;

      &:hover {
        border-color: #cbd5e0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
      }

      &.is-focus {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12), 0 8px 24px rgba(102, 126, 234, 0.15);
        transform: translateY(-1px);
      }
    }

    :deep(.el-input__inner) {
      font-size: 16px;
      padding: 16px 0;
      height: auto;
      font-weight: 600;
      color: #1a202c;
      letter-spacing: -0.1px;

      &::placeholder {
        color: #a0aec0;
        font-weight: 500;
      }
    }

    .input-suffix {
      color: #718096;
      font-size: 14px;
      font-weight: 700;
      margin-left: 12px;
      background: #edf2f7;
      padding: 4px 8px;
      border-radius: 8px;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
      letter-spacing: 0.5px;
    }
  }

  // 表单验证状态样式
  :deep(.el-form-item.is-error) {
    .el-input__wrapper {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }
  }

  :deep(.el-form-item.is-success) {
    .el-input__wrapper {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
  }

  // 错误信息样式
  :deep(.el-form-item__error) {
    font-size: 12px;
    margin-top: 6px;
    color: #ef4444;
    font-weight: 500;
  }
}

// 操作按钮区域
.action-section {
  margin-top: 20px;
  padding: 32px 40px 40px;
  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 8px;
  display: flex;
  gap: 20px;
  justify-content: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
  }

  .save-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 16px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
    position: relative;
    overflow: hidden;
    min-height: 56px;
    letter-spacing: -0.2px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(102, 126, 234, 0.35);

      &::before {
        left: 100%;
      }
    }

    &:active {
      transform: translateY(-1px);
    }

    :deep(.el-icon) {
      margin-right: 10px;

      svg {
        width: 18px;
        height: 18px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .settings-container {
    padding: 20px;
  }

  .settings-content {
    max-width: 100%;
    border-radius: 20px;
  }

  .header-section {
    padding: 32px 28px;

    .header-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 16px;

      svg {
        width: 24px;
        height: 24px;
      }
    }

    h1 {
      font-size: 28px;
    }

    .subtitle {
      font-size: 15px;
    }
  }

  .settings-form {
    padding: 32px 28px;

    .form-section {
      .section-title {
        font-size: 18px;
        margin-bottom: 24px;

        .section-icon {
          width: 22px;
          height: 22px;
        }
      }

      .form-row {
        gap: 24px;
      }
    }
  }

  .action-section {
    padding: 28px;
    flex-direction: column;
    gap: 16px;

    .save-button {
      width: 100%;
      justify-content: center;
    }
  }
}

@media (max-width: 480px) {
  .settings-container {
    padding: 16px;
  }

  .settings-content {
    border-radius: 16px;
  }

  .header-section {
    padding: 28px 24px;

    .header-icon {
      width: 44px;
      height: 44px;
      margin-bottom: 14px;

      svg {
        width: 22px;
        height: 22px;
      }
    }

    h1 {
      font-size: 26px;
    }

    .subtitle {
      font-size: 14px;
    }
  }

  .settings-form {
    padding: 28px 24px;

    .form-section {
      .section-title {
        font-size: 17px;
        margin-bottom: 20px;

        .section-icon {
          width: 20px;
          height: 20px;
        }
      }

      .form-row {
        gap: 20px;
      }
    }
  }

  .action-section {
    padding: 24px;
  }
}

// 快捷键配置样式
.shortcut-group {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.15), transparent);
  }

  &:last-child {
    margin-bottom: 0;
  }

  .shortcut-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    letter-spacing: -0.2px;

    .shortcut-icon {
      width: 20px;
      height: 20px;
      color: #667eea;
      filter: drop-shadow(0 1px 2px rgba(102, 126, 234, 0.2));
    }
  }

  .shortcut-description {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.5;
  }

  .shortcut-config {
    .shortcut-row {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 24px;
      margin-bottom: 20px;

      @media (max-width: 640px) {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .modifier-item,
    .key-item {
      margin-bottom: 0;

      .input-wrapper {
        margin-left: 0;
      }
    }

    .modifier-checkboxes {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;

      .modifier-checkbox {
        :deep(.el-checkbox) {
          margin-right: 0;
        }

        :deep(.el-checkbox__input) {
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            border-radius: 6px;
            border: 2px solid #d1d5db;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
              border-color: #667eea;
              transform: scale(1.05);
            }

            &::after {
              width: 5px;
              height: 9px;
              left: 5px;
            }
          }

          &.is-checked {
            .el-checkbox__inner {
              background-color: #667eea;
              border-color: #667eea;
              box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
            }
          }
        }

        :deep(.el-checkbox__label) {
          font-size: 14px;
          font-weight: 600;
          color: #374151;
          padding-left: 8px;
        }
      }
    }

    .key-select {
      width: 100%;

      :deep(.el-select__wrapper) {
        border-radius: 12px;
        border: 2px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0 16px;
        background: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        min-height: 48px;

        &:hover {
          border-color: #cbd5e0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
          transform: translateY(-1px);
        }

        &.is-focused {
          border-color: #667eea;
          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12), 0 8px 24px rgba(102, 126, 234, 0.15);
          transform: translateY(-1px);
        }
      }

      :deep(.el-select__selected-item) {
        font-size: 14px;
        font-weight: 600;
        color: #1a202c;
      }

      :deep(.el-select__placeholder) {
        color: #a0aec0;
        font-weight: 500;
      }
    }

    .shortcut-preview {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
        pointer-events: none;
      }

      .preview-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        white-space: nowrap;
      }

      .preview-keys {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }

      .key-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 12px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        color: white;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
        letter-spacing: 0.5px;
        min-width: 32px;
        text-align: center;

        &.primary {
          background: rgba(255, 255, 255, 0.25);
          border-color: rgba(255, 255, 255, 0.4);
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        }

        &.disabled {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.2);
          color: rgba(255, 255, 255, 0.6);
          font-style: italic;
        }

        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
      }

      .key-separator {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.8);
        margin: 0 2px;
      }
    }
  }
}

// 响应式快捷键样式
@media (max-width: 768px) {
  .shortcut-group {
    padding: 20px;
    margin-bottom: 28px;

    .shortcut-group-title {
      font-size: 15px;

      .shortcut-icon {
        width: 18px;
        height: 18px;
      }
    }

    .shortcut-description {
      font-size: 13px;
      margin-bottom: 16px;
    }

    .shortcut-config {
      .shortcut-row {
        gap: 20px;
        margin-bottom: 16px;
      }

      .modifier-checkboxes {
        gap: 10px;

        .modifier-checkbox {
          :deep(.el-checkbox__label) {
            font-size: 13px;
          }
        }
      }

      .shortcut-preview {
        padding: 14px 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        .preview-label {
          font-size: 13px;
        }

        .key-badge {
          padding: 5px 10px;
          font-size: 12px;
          min-width: 28px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .shortcut-group {
    padding: 16px;
    margin-bottom: 24px;

    .shortcut-group-title {
      font-size: 14px;
      gap: 8px;

      .shortcut-icon {
        width: 16px;
        height: 16px;
      }
    }

    .shortcut-description {
      font-size: 12px;
      margin-bottom: 14px;
    }

    .shortcut-config {
      .shortcut-row {
        gap: 16px;
        margin-bottom: 14px;
      }

      .modifier-checkboxes {
        gap: 8px;

        .modifier-checkbox {
          :deep(.el-checkbox__input) {
            .el-checkbox__inner {
              width: 16px;
              height: 16px;

              &::after {
                width: 4px;
                height: 8px;
                left: 4px;
              }
            }
          }

          :deep(.el-checkbox__label) {
            font-size: 12px;
            padding-left: 6px;
          }
        }
      }

      .key-select {
        :deep(.el-select__wrapper) {
          min-height: 44px;
          padding: 0 14px;
        }

        :deep(.el-select__selected-item) {
          font-size: 13px;
        }
      }

      .shortcut-preview {
        padding: 12px 14px;

        .preview-label {
          font-size: 12px;
        }

        .key-badge {
          padding: 4px 8px;
          font-size: 11px;
          min-width: 24px;
        }
      }
    }
  }
}
</style>